<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ui.GridLayout Test Suite</title>
<link type="text/css" rel="stylesheet" href="../../../js/tinymce/skins/lightgray/skin.min.css" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="css/ui-overrides.css" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" type="text/css" />
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
<script src="../../js/qunit/reporter.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/tinymce_loader.js"></script>
<script type="text/javascript">
var panel;

QUnit.config.autostart = false;
QUnit.config.reorder = false;

module("ui.GridLayout", {
	setup: function() {
		document.getElementById('view').innerHTML = '';
	},

	teardown: function() {
		//document.getElementById('view').innerHTML = '';
	}
});

window.onload = function() {
	QUnit.start();
};

function renderGridPanel(settings) {
	var panel = tinymce.ui.Factory.create(tinymce.extend({
		type: "panel",
		layout: "grid",
		defaults: {type: 'spacer'}
	}, settings)).renderTo(document.getElementById('view')).reflow();

	resetScroll(panel.getEl('body'));

	return panel;
}

test("automatic grid size 2x2", function() {
	panel = renderGridPanel({
		items: [
			{classes: 'red'}, {classes: 'green'},
			{classes: 'blue'}, {classes: 'cyan'}
		]
	});

	deepEqual(rect(panel), [0, 0, 40, 40]);
	deepEqual(rect(panel.find('spacer')[0]), [0, 0, 20, 20]);
	deepEqual(rect(panel.find('spacer')[1]), [20, 0, 20, 20]);
	deepEqual(rect(panel.find('spacer')[2]), [0, 20,  20, 20]);
	deepEqual(rect(panel.find('spacer')[3]), [20, 20, 20, 20]);
});

/*
test("fixed pixel size, automatic grid size 2x2", function() {
	panel = renderGridPanel({
		width: 100, height: 100,
		align: "center",
		items: [
			{classes: 'red'}, {classes: 'green'},
			{classes: 'blue'}, {classes: 'cyan'}
		]
	});

	deepEqual(rect(panel), [0, 0, 200, 200]);
	deepEqual(rect(panel.find('spacer')[0]), [0, 0, 17, 22]);
	deepEqual(rect(panel.find('spacer')[1]), [17, 0, 17, 22]);
	deepEqual(rect(panel.find('spacer')[2]), [0, 22, 16, 22]);
	deepEqual(rect(panel.find('spacer')[3]), [17, 22, 17, 22]);
});
*/

test("spacing: 3, automatic grid size 2x2", function() {
	panel = renderGridPanel({
		spacing: 3,
		items: [
			{classes: 'red'}, {classes: 'green'},
			{classes: 'blue'}, {classes: 'cyan'}
		]
	});

	deepEqual(rect(panel), [0, 0, 43, 43]);
	deepEqual(rect(panel.find('spacer')[0]), [0, 0, 20, 20]);
	deepEqual(rect(panel.find('spacer')[1]), [23, 0, 20, 20]);
	deepEqual(rect(panel.find('spacer')[2]), [0, 23, 20, 20]);
	deepEqual(rect(panel.find('spacer')[3]), [23, 23, 20, 20]);
});

test("padding: 3, automatic grid size 2x2", function() {
	panel = renderGridPanel({
		padding: 3,
		items: [
			{classes: 'red'}, {classes: 'green'},
			{classes: 'blue'}, {classes: 'cyan'}
		]
	});

	deepEqual(rect(panel), [0, 0, 46, 46]);
	deepEqual(rect(panel.find('spacer')[0]), [3, 3, 20, 20]);
	deepEqual(rect(panel.find('spacer')[1]), [23, 3, 20, 20]);
	deepEqual(rect(panel.find('spacer')[2]), [3, 23, 20, 20]);
	deepEqual(rect(panel.find('spacer')[3]), [23, 23, 20, 20]);
});

test("spacing: 3, padding: 3, automatic grid size 2x2", function() {
	panel = renderGridPanel({
		padding: 3,
		spacing: 3,
		items: [
			{classes: 'red'}, {classes: 'green'},
			{classes: 'blue'}, {classes: 'cyan'}
		]
	});

	deepEqual(rect(panel), [0, 0, 49, 49]);
	deepEqual(rect(panel.find('spacer')[0]), [3, 3, 20, 20]);
	deepEqual(rect(panel.find('spacer')[1]), [26, 3, 20, 20]);
	deepEqual(rect(panel.find('spacer')[2]), [3, 26, 20, 20]);
	deepEqual(rect(panel.find('spacer')[3]), [26, 26, 20, 20]);
});

test("inner elements 100x100 maxWidth/maxHeight: 118 (overflow W+H)", function() {
	panel = renderGridPanel({
		autoResize: true,
		autoScroll: true,
		maxWidth: 118,
		maxHeight: 118,
		defaults: {
			type: 'spacer',
			minWidth: 100,
			minHeight: 100
		},
		items: [
			{classes: 'red dotted'}, {classes: 'green dotted'},
			{classes: 'blue dotted'}, {classes: 'cyan dotted'}
		]
	});

	deepEqual(rect(panel), [0, 0, 118, 118]);
	deepEqual(rect(panel.find('spacer')[0]), [0, 0, 100, 100]);
	deepEqual(rect(panel.find('spacer')[1]), [100, 0, 100, 100]);
	deepEqual(rect(panel.find('spacer')[2]), [0, 100, 100, 100]);
	deepEqual(rect(panel.find('spacer')[3]), [100, 100, 100, 100]);
	equal(panel.layoutRect().w, 118);
	equal(panel.layoutRect().h, 118);
	equal(panel.layoutRect().contentW, 200);
	equal(panel.layoutRect().contentH, 200);
});

test("inner elements: 100x100, padding: 20, spacing: 10, maxWidth/maxHeight: 118 (overflow W+H)", function() {
	panel = renderGridPanel({
		autoResize: true,
		autoScroll: true,
		maxWidth: 118,
		maxHeight: 118,
		padding: 20,
		spacing: 10,
		defaults: {
			type: 'spacer',
			minWidth: 100,
			minHeight: 100
		},
		items: [
			{classes: 'red dotted'}, {classes: 'green dotted'},
			{classes: 'blue dotted'}, {classes: 'cyan dotted'}
		]
	});

	deepEqual(rect(panel), [0, 0, 118, 118]);
	deepEqual(rect(panel.find('spacer')[0]), [20, 20, 100, 100]);
	deepEqual(rect(panel.find('spacer')[1]), [130, 20, 100, 100]);
	deepEqual(rect(panel.find('spacer')[2]), [20, 130, 100, 100]);
	deepEqual(rect(panel.find('spacer')[3]), [130, 130, 100, 100]);
	equal(panel.layoutRect().w, 118);
	equal(panel.layoutRect().h, 118);
	equal(panel.layoutRect().contentW, 20 + 200 + 10 + 20);
	equal(panel.layoutRect().contentH, 20 + 200 + 10 + 20);
});

test("inner elements 100x100 maxWidth: 118 (overflow W)", function() {
	panel = renderGridPanel({
		autoResize: true,
		autoScroll: true,
		maxWidth: 100,
		defaults: {
			type: 'spacer',
			minWidth: 100,
			minHeight: 100
		},
		items: [
			{classes: 'red dotted'}, {classes: 'green dotted'},
			{classes: 'blue dotted'}, {classes: 'cyan dotted'}
		]
	});

	deepEqual(rect(panel.find('spacer')[0]), [0, 0, 100, 100]);
	deepEqual(rect(panel.find('spacer')[1]), [100, 0, 100, 100]);
	deepEqual(rect(panel.find('spacer')[2]), [0, 100, 100, 100]);
	deepEqual(rect(panel.find('spacer')[3]), [100, 100, 100, 100]);
	equal(panel.layoutRect().contentW, 200);
	equal(panel.layoutRect().contentH, 200);
});

test("inner elements 100x100 maxHeight: 118 (overflow H)", function() {
	panel = renderGridPanel({
		autoResize: true,
		autoScroll: true,
		maxHeight: 100,
		defaults: {
			type: 'spacer',
			minWidth: 100,
			minHeight: 100
		},
		items: [
			{classes: 'red dotted'}, {classes: 'green dotted'},
			{classes: 'blue dotted'}, {classes: 'cyan dotted'}
		]
	});

	deepEqual(rect(panel.find('spacer')[0]), [0, 0, 100, 100]);
	deepEqual(rect(panel.find('spacer')[1]), [100, 0, 100, 100]);
	deepEqual(rect(panel.find('spacer')[2]), [0, 100, 100, 100]);
	deepEqual(rect(panel.find('spacer')[3]), [100, 100, 100, 100]);
	equal(panel.layoutRect().contentW, 200);
	equal(panel.layoutRect().contentH, 200);
});
</script>
</head>
<body>
	<h1 id="qunit-header">ui.GridLayout Test Suite</h1>
	<h2 id="qunit-banner"></h2>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests">
	</ol>
	<div id="view" style="position: absolute; right: 0; top: 0"></div>
</body>
</html>
